<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
   {include="style"}
   <style>
	.btn-jz{
		margin-left:0px !important;
	}
	span.jzspan {
		width: 45px;
	}
	#templatelist li {
		width: 24%;
		float: left;
		height: 365px;
		border: 1px solid #ccc;
		margin: 2px;
		box-shadow: 2px 2px 2px #ebe6e6;
	}
	#templatelist li:hover {
		border: 1px solid #f00;
		box-shadow: 4px 4px 4px #ededed;

	}

	#templatelist{
		height: 1125px;
	}
	#templatelist li dl {
		padding: 8px;
	}
	#templatelist li dl dd{
	    overflow: hidden;
		white-space: nowrap;
	}
	dd.thumbnail{
    height: 230px;
	}
	dd.thumbnail img{
	width:100%;
	height:100%;
	}
	dd span{
		cursor:pointer;
	}

   </style>
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="/">{fun JZLANG('首页')}</a>
        <a >{fun JZLANG('模板管理')}</a>
        <a><cite>{fun JZLANG('模板列表')}</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="{fun JZLANG('刷新')}">
        <i class="iconfont" style="line-height:30px">&#xe6aa;</i></a>
    </div>
    <div class="x-body">
	
		<div class="layui-card">
			<div class="layui-card-body">
			  <div class="layui-row">
	    <form class="layui-form layui-col-md12 x-so" method="get" id="myform">
	    <a href="{fun U('Template/index')}" class="layui-btn layui-btn-primary">{fun JZLANG('全部')}</a>
		<a href="{fun U('Template/index',['isdown'=>1])}" class="layui-btn  layui-btn-normal">{fun JZLANG('本地')}</a>
		
		<input type="text" name="title" value="{$title}" placeholder="{fun JZLANG('请输入模板名字')}" autocomplete="off" class="layui-input">
		  <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
		<a class="layui-btn layui-btn-warm layui-btn-sm" style="float: right;" title="{fun JZLANG('设置')}" onclick="setconf()"><i class="iconfont">&#xe6ae;</i></a>
		</form>
      </div>
		
		<ul id="templatelist">
			 {foreach $lists as $v}
			 <li>
			    <dl title="{$v['name']}">
				<dd class="thumbnail"><a href="{$v['web']}" target="_blank"><img src="/static/nopic.jpg" lay-src="{$v['thumbnail']}" onerror="this.src='/static/nopic.jpg'"></a></dd>
				<dd>{$v['name']}</dd>
				<dd>{fun JZLANG('作者：')}{$v['author']}</dd>
				<dd>{if($v['official']==1)}<span class="layui-badge layui-bg-green jzspan">{fun JZLANG('官方')}</span>{else if($v['official']==2)}<span class="layui-badge layui-bg-orange jzspan">{fun JZLANG('本地')}</span>{else}<span class="layui-badge layui-bg-orange jzspan">{fun JZLANG('第三方')}</span>{/if}
				【 {$v['template']} 】
				v{$v['version']}{if($v['isupdate'])}  <span style="cursor:pointer;" title="{fun JZLANG('点击查看')}" onclick="x_all_show('{fun JZLANG('更新说明')}','{fun U('Template/update',array('template'=>$v['template']))}')" class="layui-badge">{fun JZLANG('有更新')}</span>{/if}</dd>
				<dd>{$v['description']}</dd>
				<dd>{if($v['install'])}
				<span class="layui-badge layui-bg-gray">{fun JZLANG('已使用')}</span>
				<span class="layui-badge layui-bg-blue" onclick="beifen('{$v['template']}')">{fun JZLANG('备份数据')}</span>
				{else if($v['official']==2)}
				<span class="layui-badge layui-bg-blue" onclick="install('{$v['template']}')">{fun JZLANG('安装模板')}</span>
				{else}
				
				<form class="layui-form">
				<a lay-submit  lay-filter="down" data-{$v['template']}-size="0" data-{$v['template']}-url="{$v['downurl']}" data="{$v['template']}" id="{$v['template']}-downbutton" class="layui-btn  layui-btn-xs layui-btn-warm">{fun JZLANG('下载')}</a>
				<div class="layui-progress  layui-progress-big"   id="{$v['template']}-down-action" lay-showpercent="true" lay-filter="demo-{$v['template']}-progress" style="margin: 30px;display:none;">
				  <div class="layui-progress-bar" lay-percent="0%"></div>
				</div>
				</form>
				
				{/if}</dd>
				<dd></dd>
				</dl>
			 
			 </li>
			 {/foreach}
		</ul>
	  
		
		  
		  <div class="page">
			{$pages}
		  </div>
	 
			
			
			</div>
		</div>
	
	
     
    </div>
    <script>
      layui.use(['laydate','form','flow'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
        var flow = layui.flow;
		flow.lazyimg();
       
		form.on('switch(status)', function (data) {
		
			$.post("{fun U('change_status')}",{filepath:data.elem.value},function(r){});
		});
		form.on('submit(down)', function (data) {
			var filepath = $(data.elem).attr('data');
			var download_url = $(data.elem).attr('data-'+filepath+'-url');
			$("#"+filepath+"-downbutton").hide();
			$("#"+filepath+"-down-action").show();
			var othis = $("#"+filepath+"-down-action");
          	var DISABLED = 'layui-btn-disabled';
		    if(othis.hasClass(DISABLED)){
				return;
			}
			//获取文件大小
			$.post("{fun U('template/update')}",{action:'prepare-download',template:filepath,download_url:download_url},function(res){
				console.log('预下载',res);
			     if(res.code==0){
					$(data.elem).attr('data-'+filepath+'-size',res.size);
				 }else{
				  layer.alert('{fun JZLANG('获取文件大小失败，请检查网络！')}');return false;
				 }
			},'json');
		    $.post("{fun U('template/update')}",{action:'start-download',template:filepath,download_url:download_url},function(res){
			    //开始下载
			    console.log(res);
			},'json');
			
		      //模拟loading
		    var n = 0, timer = setInterval(function(){ 
		        $.post("{fun U('template/update')}",{action:'get-file-size',template:filepath,download_url:download_url},function(res){
		        	console.log(res);
				    var cur_size = parseInt(res.size);
				    console.log(cur_size);
				    var filesize = parseInt($(data.elem).attr('data-'+filepath+'-size'));
				    n = Math.round(cur_size/filesize)*100;
				    if(filesize==cur_size){
					  //n = 90;//只加载到90%，剩下10%解压
			          //$("#down-text").html('插件下载完成');
					  console.log('插件下载完成，正在解压~');
			          clearInterval(timer);
			          othis.removeClass(DISABLED);
			          element.progress('demo-'+filepath+'-progress', n+'%');
					  $.post("{fun U('template/update')}",{template:filepath,download_url:download_url,'filesize':$(data.elem).attr('data-'+filepath+'-size'),'action':'file-upzip'},function(res){
				        	if(res.code==0){
								console.log('插件已解压完毕！');
				        		element.progress('demo-'+filepath+'-progress', '100%');
								window.location.reload();
				        	}else{
				        		layer.msg(res.msg);return false;
				        	}

						   
						},'json');
			          

			        }
			        element.progress('demo-'+filepath+'-progress', n+'%');
				},'json');

		       
		    }, 1000);
			
			 return false;
			})
		
		
      });

	  function beifen(template){
		
		layer.confirm('{fun JZLANG('如果数据量较大，不建议通过此方法备份数据库，可以从数据库中直接导出。确定要备份数据库吗？')}', {icon: 3, title:'{fun JZLANG('提示')}'}, function(index){
		 
		 $.post("{fun U('Template/update')}",{template:template,action:'backup',ajax:1},function(r){
			if(r.code==0){
				layer.msg(r.msg,{icon: 6},function(){
				location.reload();
				});
				
			}else{
				layer.alert(r.msg);
			}
		  },'json')
		 
		  
		  layer.close(index);
		});
	  
	  
		 
	  }
	 
	  
	  function install(template){
		
		
		layer.open({
		  type: 1,
		  title:'{fun JZLANG('安装提示')}',
		  skin: 'layui-layer-rim', //加上边框
		  area: ['500px', '250px'], //宽高
		  content: '<form class="layui-form" action=""><div style="margin-top: 36px;" class="layui-form-item">'+
		  '<input type="hidden" name="template" value="'+template+'" >'+
		  '<input type="hidden" name="action" value="template-install" >'+
    '<label class="layui-form-label" style="width: 85px;">{fun JZLANG('该模板用于：')}</label>'+
    '<div class="layui-input-block">'+
      '<input type="checkbox" name="tpl[]" value="pc" checked title="{fun JZLANG('PC端')}">'+
      '<input type="checkbox" name="tpl[]" value="wap" checked title="{fun JZLANG('手机端')}">'+
      '<input type="checkbox" name="tpl[]" value="wechat" checked title="{fun JZLANG('微信端')}">'+
    '</div>'+
	 '<div class="layui-form-item" style="margin-top: 50px;">'+
    '<div class="layui-input-block" style="margin-left:0px;text-align: center;">'+
     ' <button class="layui-btn" lay-submit lay-filter="install">{fun JZLANG('安装模板')}</button>'+
    '</div>'+
  '</div>'+
  '</div></form>'
		});
		
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(install)', function(data){
			//layer.msg(JSON.stringify(data.field));

			$.post("{fun U('Template/update')}",data.field,function(r){
				if(r.code==0){
					layer.msg(r.msg,{icon: 6},function(){
					location.reload();
					});
					
				}else{
					layer.alert(r.msg);
				}
			  },'json')
			
			return false;
		  });
		  
		  form.render();
		  
		});
		
		 
	  }

	  function setconf(){
		  layer.prompt({
			  formType: 0,
			  value: '{$webapi}',
			  title: '{fun JZLANG('设置接口')}',
			  area: ['800px', '400px']
		  }, function(value, index, elem){
			  $.post("{fun U('template/index')}",{set:1,webapi:value},function(r){
				  if(r.code==0){
					  layer.msg(r.msg,{icon: 6},function(){
						  location.reload();
					  });

				  }else{
					  layer.msg(r.msg);
				  }
			  },'json')


			  layer.close(index);
		  });


	  }


    </script>
   
  </body>

</html>